// 添加时间判断的 confirmCourse 函数
window.confirmCourse = function(btn) {
    const courseInfo = JSON.parse(btn.dataset.courseInfo);
    
    // 获取当前激活的卡片中的所有课程安排
    const activeCard = document.querySelector('.child-card.active');
    if (!activeCard) {
        layer.msg('请先选择一个孩子！', {icon: 2});
        return;
    }

    // 检查当前选择的时间段是否已有课程
    const scheduleList = activeCard.querySelector('.schedule-list');
    const existingSchedules = scheduleList.querySelectorAll('.schedule-item');
    
    // 检查时间冲突
    let hasTimeConflict = false;
    existingSchedules.forEach(schedule => {
        const existingDay = schedule.querySelector('.day').textContent;
        const existingTime = schedule.querySelectorAll('.course')[0].textContent;
        
        // 只检查相同星期的课程
        if (existingDay === courseInfo.day) {
            // 检查时间段是否重叠
            if (existingTime === courseInfo.time) {
                hasTimeConflict = true;
                return;
            }
        }
    });

    if (hasTimeConflict) {
        layer.msg(`${courseInfo.day} ${courseInfo.time} 已有课程安排！`, {
            icon: 2,
            time: 2000
        });
        return;
    }
    
    // 如果没有冲突，添加新课程
    const newSchedule = document.createElement('div');
    newSchedule.className = 'schedule-item';
    newSchedule.innerHTML = `
        <span class="day">${courseInfo.day}</span>
        <span class="course">${courseInfo.time}</span>
        <span class="course">${courseInfo.course}</span>
        <span class="course">${courseInfo.location}</span>
        <span class="coach">${courseInfo.coach}</span>
    `;
    scheduleList.appendChild(newSchedule);

    layer.closeAll();
    layer.msg('课程添加成功！', {icon: 1});
};

layui.use(['element', 'form', 'layer'], function(){
    var element = layui.element;
    var form = layui.form;
    var layer = layui.layer;

    // 添加全局弹出层样式配置
    layer.config({
        skin: 'demo-class'
    });
    
    // 添加自定义样式到head
    var style = document.createElement('style');
    style.innerHTML = `
        .demo-class .layui-layer-title {
            background-color: #20b2aa !important;
            color: #fff !important;
            border: none !important;
        }
    `;
    document.head.appendChild(style);

    // 初始化进度条
    element.render('progress');

    // 初始化表单元素
    form.render();

    // 处理孩子切换
    form.on('select(childSelect)', function(data){
        console.log('切换到孩子：', data.value); // 调试用

        // 隐藏所有孩子卡片
        var allCards = document.querySelectorAll('.child-card');
        allCards.forEach(function(card) {
            card.style.display = 'none';
            card.classList.remove('active');
        });

        // 显示选中的孩子卡片
        var selectedCard = document.querySelector(`.child-card[data-child="${data.value}"]`);
        if (selectedCard) {
            selectedCard.style.display = 'block';
            selectedCard.classList.add('active');
        }
    });
    // 添加课程按钮点击事件
    document.querySelectorAll('.add-schedule-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            layer.open({
                type: 1,
                title: '选择课程时间',
                area: ['900px', '472px'],
                content: `
                    <table class="course-selection-table">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>周一</th>
                                <th>周二</th>
                                <th>周三</th>
                                <th>周四</th>
                                <th>周五</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>08:00-09:00</td>
                                <td>
                                    <div class="selectable-course" data-course="足球训练" data-coach="龙教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="A区训练场">
                                        足球训练<br>
                                        龙教练
                                    </div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="篮球训练" data-coach="王教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="B区训练场">
                                        篮球训练<br>
                                        王教练
                                    </div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="羽毛球训练" data-coach="李教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="C区训练场">
                                        羽毛球训练<br>
                                        李教练
                                    </div>
                                </td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="网球训练" data-coach="张教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="D区训练场">
                                        网球训练<br>
                                        张教练
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>09:30-10:30</td>
                                <td>
                                    <div class="selectable-course" data-course="足球训练" data-coach="龙教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="A区训练场">
                                        足球训练<br>
                                        龙教练
                                    </div>
                                </td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="羽毛球训练" data-coach="李教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="C区训练场">
                                        羽毛球训练<br>
                                        李教练
                                    </div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="篮球训练" data-coach="王教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="B区训练场">
                                        篮球训练<br>
                                        王教练
                                    </div>
                                </td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                            </tr>
                            <tr class="time-separator">
                                <td colspan="6">下午</td>
                            </tr>
                            <tr>
                                <td>14:00-15:00</td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="网球训练" data-coach="张教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="D区训练场">
                                        网球训练<br>
                                        张教练
                                    </div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="足球训练" data-coach="龙教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="A区训练场">
                                        足球训练<br>
                                        龙教练
                                    </div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="篮球训练" data-coach="王教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="B区训练场">
                                        篮球训练<br>
                                        王教练
                                    </div>
                                </td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                            </tr>
                            <tr>
                                <td>15:30-16:30</td>
                                <td>
                                    <div class="selectable-course" data-course="羽毛球训练" data-coach="李教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="C区训练场">
                                        羽毛球训练<br>
                                        李教练
                                    </div>
                                </td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="网球训练" data-coach="张教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="D区训练场">
                                        网球训练<br>
                                        张教练
                                    </div>
                                </td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="足球训练" data-coach="龙教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="A区训练场">
                                        足球训练<br>
                                        龙教练
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                `,
                success: function() {
                    // 为每个可选课程添加点击事件
                    document.querySelectorAll('.selectable-course').forEach(cell => {
                        cell.addEventListener('click', function(e) {
                            // 获取课程详细信息
                            const courseInfo = {
                                course: this.dataset.course,
                                coach: this.dataset.coach,
                                avatar: this.dataset.avatar,
                                location: this.dataset.location,
                                time: this.closest('tr').cells[0].textContent,
                                day: Array.from(this.closest('tr').cells).indexOf(this.closest('td')) === 1 ? '周一' :
                                     Array.from(this.closest('tr').cells).indexOf(this.closest('td')) === 2 ? '周二' :
                                     Array.from(this.closest('tr').cells).indexOf(this.closest('td')) === 3 ? '周三' :
                                     Array.from(this.closest('tr').cells).indexOf(this.closest('td')) === 4 ? '周四' : '周五'
                            };

                            // 打开课程详情弹窗
                            layer.open({
                                type: 1,
                                title: '课程详情',
                                area: ['400px', '500px'],
                                content: `
                                    <div class="course-detail-popup">
                                        <div class="coach-info">
                                            <img src="${courseInfo.avatar}" class="coach-avatar">
                                            <h3>${courseInfo.coach}</h3>
                                            <p class="coach-title">专业教练</p>
                                        </div>
                                        <div class="course-info">
                                            <div class="info-item">
                                                <i class="layui-icon layui-icon-read"></i>
                                                <span>课程：${courseInfo.course}</span>
                                            </div>
                                            <div class="info-item">
                                                <i class="layui-icon layui-icon-location"></i>
                                                <span>场地：${courseInfo.location}</span>
                                            </div>
                                            <div class="info-item">
                                                <i class="layui-icon layui-icon-date"></i>
                                                <span>时间：${courseInfo.day} ${courseInfo.time}</span>
                                            </div>
                                        </div>
                                        <div class="action-buttons">
                                            <button class="layui-btn" onclick="window.confirmCourse(this)" 
                                                    data-course-info='${JSON.stringify(courseInfo)}'>
                                                确认选择
                                            </button>
                                            <button class="layui-btn layui-btn-primary cancel-btn">
                                                取消
                                            </button>
                                        </div>
                                    </div>
                                `,
                                success: function(layero, index) {
                                    // 在弹窗创建成功后为取消按钮绑定事件
                                    layero.find('.cancel-btn').on('click', function() {
                                        layer.close(index);  // 关闭当前弹窗
                                    });
                                }
                            });
                        });
                    });
                }
            });
        });
    });

    // 处理课程选择表单提交
    form.on('submit(selectCourse)', function(data) {
        const selectedCell = document.querySelector('.course-cell.selected');
        if (selectedCell) {
            selectedCell.innerHTML = `${data.field.courseType}<br>${data.field.coach}`;

            // 更新课程列表
            const activeCard = document.querySelector('.child-card.active');
            const scheduleList = activeCard.querySelector('.schedule-list');
            const newSchedule = document.createElement('div');
            newSchedule.className = 'schedule-item';
            newSchedule.innerHTML = `
                <span class="day">${selectedCell.dataset.day}</span>
                <span class="time">${selectedCell.dataset.time}</span>
                <span class="course">${data.field.courseType}</span>
                <span class="coach">${data.field.coach}</span>
            `;
            scheduleList.appendChild(newSchedule);
        }

        layer.closeAll();
        layer.msg('选择成功！', {icon: 1});
        return false;
    });

    // 添加消息通知点击事件
    document.querySelector('.notification-box').addEventListener('click', function() {
        // 移除徽章
        this.querySelector('.badge').style.display = 'none';
        
        layer.open({
            type: 1,
            title: '消息通知',
            area: ['500px', '500px'],
            content: `
                <div class="layui-card" style="margin: 15px;">
                    <div class="layui-card-body">
                        <div style="padding: 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer;">
                            <div style="color: #1E9FFF; margin-bottom: 5px;">课程提醒</div>
                            <div style="color: #666; font-size: 14px;">小明的钢琴课程将在今天下午2点开始</div>
                            <div style="color: #999; font-size: 12px; margin-top: 5px;">10分钟前</div>
                        </div>
                        <div style="padding: 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer;">
                            <div style="color: #1E9FFF; margin-bottom: 5px;">系统通知</div>
                            <div style="color: #666; font-size: 14px;">您的会员即将到期，请及时续费</div>
                            <div style="color: #999; font-size: 12px; margin-top: 5px;">2小时前</div>
                        </div>
                        <div style="padding: 10px; cursor: pointer;">
                            <div style="color: #1E9FFF; margin-bottom: 5px;">活动通知</div>
                            <div style="color: #666; font-size: 14px;">暑期特惠活动即将开始，敬请关注！</div>
                            <div style="color: #999; font-size: 12px; margin-top: 5px;">1天前</div>
                        </div>
                    </div>
                </div>
            `
        });
    });

    // 添加修改资料按钮点击事件
    document.getElementById('editProfile').addEventListener('click', function() {
        // 获取当前页面显示的个人信息
        const currentName = document.querySelector('.basic-info h2').textContent.split(' ')[0]; // 分割掉性别标签
        const currentGender = document.querySelector('.gender-tag').textContent.replace('士', ''); // 移除"士"字
        const currentPhone = document.querySelector('.basic-info p:first-of-type').textContent.replace(/[^0-9]/g, ''); // 只保留数���
        const currentAvatar = document.querySelector('.avatar').src;

        layer.open({
            type: 1,
            title: '修改个人信息',
            area: ['500px', 'auto'],
            content: `
                <div class="edit-profile-container" style="padding: 30px;">
                    <form class="layui-form">
                        <div class="avatar-upload-section" style="text-align: center; margin-bottom: 30px;">
                            <div class="avatar-wrapper" style="width: 120px; height: 120px; margin: 0 auto; position: relative;">
                                <img src="${currentAvatar}" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                                <div class="upload-btn-wrapper" style="position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);">
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="uploadAvatar" 
                                            style="border-radius: 20px; padding: 0 15px; background: rgba(255,255,255,0.9); box-shadow: 0 2px 6px rgba(0,0,0,0.1);">
                                        <i class="layui-icon layui-icon-camera"></i> 更换头像
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">姓名</label>
                            <div class="layui-input-block" style="margin-left: 130px;">
                                <input type="text" name="name" required lay-verify="required" 
                                       placeholder="请输入姓名" class="layui-input" value="${currentName}"
                                       style="border-radius: 4px;">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">性别</label>
                            <div class="layui-input-block" style="margin-left: 130px;">
                                <input type="radio" name="gender" value="男" title="男" ${currentGender === '男' ? 'checked' : ''}>
                                <input type="radio" name="gender" value="女" title="女" ${currentGender === '女' ? 'checked' : ''}>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">手机号码</label>
                            <div class="layui-input-block" style="margin-left: 130px;">
                                <input type="text" name="phone" required lay-verify="required|phone" 
                                       placeholder="请输入手机号码" class="layui-input" value="${currentPhone}"
                                       style="border-radius: 4px;">
                            </div>
                        </div>
                        
                        <div class="layui-form-item" style="margin-top: 40px; text-align: center;">
                            <div class="layui-input-block" style="margin-left: 0;">
                                <button class="layui-btn" lay-submit lay-filter="editProfileSubmit"
                                        style="width: 120px; border-radius: 20px; background: #20b2aa;">
                                    保存修改
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary"
                                        style="width: 120px; border-radius: 20px; margin-left: 20px;">
                                    重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            `,
            success: function() {
                form.render();

                // 上传头像功能
                layui.upload.render({
                    elem: '#uploadAvatar',
                    url: '', // 这里填写上传接口
                    accept: 'images',
                    acceptMime: 'image/*',
                    done: function(res){
                        layer.msg('上传成功！');
                        // 更新头像显示
                        document.querySelector('.avatar').src = res.url;
                    }
                });
            }
        });
    });

    // 处理修改资料表单提交
    form.on('submit(editProfileSubmit)', function(data) {
        // 这里可以添加与后端的数据交互
        layer.msg('修改成功！', {icon: 1});

        // 更新页面上的个人信息显示
        document.querySelector('.basic-info h2').innerHTML =
            data.field.name + ' <span class="gender-tag">' + data.field.gender + '士</span>';
        document.querySelector('.basic-info p:first-of-type').innerHTML =
            '<i class="layui-icon layui-icon-cellphone"></i> ' + data.field.phone;

        layer.closeAll('page');
        return false;
    });
});
//续费
document.querySelectorAll('.child-card .course-progress .progress-item .layui-btn').forEach(button => {
    button.addEventListener('click', function() {
        // 获取课程信息
        const courseTitle = this.closest('.progress-item').querySelector('.progress-title span').textContent;
        
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                type: 1,
                area: ['700px', '700px'],
                title: '续费课程',
                content: ` 
                    <div class="renewal-page">
                            <h1>续费服务</h1>
                            <div class="image-section">
                                <img src="../img/front/Slideshow0.jpg" alt="程图片">
                            </div>
                            <div class="package-details">
                                <h2>套餐详情</h2>
                                <p><strong>课程名称：</strong>${courseTitle}</p>
                                <p><strong>价格：</strong>¥1000/年</p>
                                <p><strong>续费期限：</strong>1年</p>
                                <p><strong>课程描述：</strong>本课程适合初学者，将带领你了解${courseTitle}的基本知识。</p>
                            </div>
                            <div class="renewal-options">
                                <h3>选择续费时长</h3>
                                <div class="option-buttons">
                                    <button class="duration-btn" data-duration="3" data-price="300">3个月 ¥300</button>
                                    <button class="duration-btn" data-duration="6" data-price="500">6个月 ¥500</button>
                                    <button class="duration-btn active" data-duration="12" data-price="1000">12个月 ¥1000</button>
                                </div>
                            </div>
                            <div class="payment-section">
                                <div class="payment-methods">
                                    <label>
                                        <input type="radio" name="payment" value="wechat" checked>
                                        <img src="../img/front/wechat-pay.png" alt="微信支付">
                                    </label>
                                    <label>
                                        <input type="radio" name="payment" value="alipay">
                                        <img src="../img/front/alipay.png" alt="支付宝">
                                    </label>
                                </div>
                                <div class="total-amount">
                                    <span>总计：</span>
                                    <span class="amount">¥1000</span>
                                </div>
                            </div>
                            <div class="renewal-button">
                                <button onclick="renewService(this)" data-course="${courseTitle}">立即续费</button> 
                            </div>
                        </div>
                `
            });

            // 为续费时长按钮添加点击事件
            document.querySelectorAll('.duration-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除其他按钮的active类
                    document.querySelectorAll('.duration-btn').forEach(b => b.classList.remove('active'));
                    // 添加当前按钮的active类
                    this.classList.add('active');
                    // 更新总金额
                    document.querySelector('.total-amount .amount').textContent = 
                        `¥${this.dataset.price}`;
                });
            });
        });
    });
});

// 续费服务函数
window.renewService = function(btn) {
    const courseTitle = btn.dataset.course;
    const duration = document.querySelector('.duration-btn.active').dataset.duration;
    const amount = document.querySelector('.total-amount .amount').textContent;
    const paymentMethod = document.querySelector('input[name="payment"]:checked').value;

    // 这里可以添加实际的支付逻辑
    layer.confirm(`确认为${courseTitle}续费${duration}个月？${amount}`, {
        btn: ['确认支付','取消']
    }, function(){
        // 模拟支付过程
        layer.msg('支付处理中...', {
            icon: 16,
            time: 2000,
            shade: 0.3
        }, function(){
            // 支付成功后的处理
            layer.msg('续费成功！', {icon: 1});
            // 更新进度条状态
            const progressItem = document.querySelector(`.progress-title span:contains('${courseTitle}')`).closest('.progress-item');
            if (progressItem) {
                progressItem.querySelector('.status').textContent = '使用中';
                progressItem.querySelector('.status').className = 'status in-progress';
                // 重置进度条
                const progressBar = progressItem.querySelector('.layui-progress-bar');
                if (progressBar) {
                    progressBar.style.width = '0%';
                    progressBar.setAttribute('lay-percent', '0%');
                }
            }
            // 关闭所有弹窗
            layer.closeAll();
        });
    });
};
// 使用事件委托处理右键菜单
document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('contextmenu', function(e) {
        const scheduleItem = e.target.closest('.schedule-item');
        if (scheduleItem) {
            e.preventDefault(); // 阻止默认右键菜单
            
            // 获取当前课程信息
            const currentDay = scheduleItem.querySelector('.day').textContent;
            const currentTime = scheduleItem.querySelector('.course').textContent;
            const currentCourse = scheduleItem.querySelectorAll('.course')[1].textContent;
            const currentCoach = scheduleItem.querySelector('.coach').textContent;

            // 使用与申请课程相同的弹窗样式
            layer.open({
                type: 1,
                title: '更改课程时间',
                area: ['900px','472px'],
                content: `
                    <table class="course-selection-table">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>周一</th>
                                <th>周二</th>
                                <th>周三</th>
                                <th>周四</th>
                                <th>周五</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>08:00-09:00</td>
                                <td>
                                    <div class="selectable-course" data-course="足球训练" data-coach="龙教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="A区训练场">
                                        足球训练<br>
                                        龙教练
                                    </div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="篮球训练" data-coach="王教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="B区训练场">
                                        篮球训练<br>
                                        王教练
                                    </div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="羽毛球训练" data-coach="李教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="C区训练场">
                                        羽毛球训练<br>
                                        李教练
                                    </div>
                                </td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="网球训练" data-coach="张教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="D区训练场">
                                        网球训练<br>
                                        张教练
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>09:30-10:30</td>
                                <td>
                                    <div class="selectable-course" data-course="足球训练" data-coach="龙教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="A区训练场">
                                        足球训练<br>
                                        龙教练
                                    </div>
                                </td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="羽毛球训练" data-coach="李教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="C区训练场">
                                        羽毛球训练<br>
                                        李教练
                                    </div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="篮球训练" data-coach="王教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="B区训练场">
                                        篮球训练<br>
                                        王教练
                                    </div>
                                </td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                            </tr>
                            <tr class="time-separator">
                                <td colspan="6">下午</td>
                            </tr>
                            <tr>
                                <td>14:00-15:00</td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="网球训练" data-coach="张教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="D区训练场">
                                        网球训练<br>
                                        张教练
                                    </div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="足球训练" data-coach="龙教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="A区训练场">
                                        足球训练<br>
                                        龙教练
                                    </div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="篮球训练" data-coach="王教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="B区训练场">
                                        篮球训练<br>
                                        王教练
                                    </div>
                                </td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                            </tr>
                            <tr>
                                <td>15:30-16:30</td>
                                <td>
                                    <div class="selectable-course" data-course="羽毛球训练" data-coach="李教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="C区训练场">
                                        羽毛球训练<br>
                                        李教练
                                    </div>
                                </td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="网球训练" data-coach="张教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="D区训练场">
                                        网球训练<br>
                                        张教练
                                    </div>
                                </td>
                                <td>
                                    <div class="course-empty">暂无课程</div>
                                </td>
                                <td>
                                    <div class="selectable-course" data-course="足球训练" data-coach="龙教练" 
                                         data-avatar="../img/avatar/emp/1.png" data-location="A区训练场">
                                        足球训练<br>
                                        龙教练
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                `,
                success: function(layero) {
                    // 为每个可选课程添加点击事件
                    layero.find('.selectable-course').on('click', function() {
                        const courseInfo = {
                            course: this.dataset.course,
                            coach: this.dataset.coach,
                            avatar: this.dataset.avatar,
                            location: this.dataset.location,
                            time: this.closest('tr').cells[0].textContent,
                            day: Array.from(this.closest('tr').cells).indexOf(this.closest('td')) === 1 ? '周一' :
                                 Array.from(this.closest('tr').cells).indexOf(this.closest('td')) === 2 ? '周二' :
                                 Array.from(this.closest('tr').cells).indexOf(this.closest('td')) === 3 ? '周三' :
                                 Array.from(this.closest('tr').cells).indexOf(this.closest('td')) === 4 ? '周四' : '周五'
                        };

                        // 添加确认提示
                        layer.confirm(`确定要更换到以下课程吗？<br>
                            <div style="margin: 15px 0; padding: 15px; background: #f9f9f9; border-radius: 4px;">
                                <p><i class="layui-icon layui-icon-read"></i> 课程：${courseInfo.course}</p>
                                <p><i class="layui-icon layui-icon-user"></i> 教练：${courseInfo.coach}</p>
                                <p><i class="layui-icon layui-icon-location"></i> 地点：${courseInfo.location}</p>
                                <p><i class="layui-icon layui-icon-date"></i> 时间：${courseInfo.day} ${courseInfo.time}</p>
                            </div>`, {
                            title: '更换课程确认',
                            btn: ['确认更换', '取消'],
                            area: ['400px', 'auto'],
                            skin: 'layui-layer-molv', // 使用墨绿色主题
                            shade: 0.1,  // 设置遮罩透明度
                        }, function(index){
                            // 用户点击确认后执行
                            // 更新原有课程信息
                            scheduleItem.querySelector('.day').textContent = courseInfo.day;
                            scheduleItem.querySelectorAll('.course')[0].textContent = courseInfo.time;
                            scheduleItem.querySelectorAll('.course')[1].textContent = courseInfo.course;
                            scheduleItem.querySelectorAll('.course')[2].textContent = courseInfo.location;
                            scheduleItem.querySelector('.coach').textContent = courseInfo.coach;

                            layer.close(index);
                            layer.closeAll('page'); // 关闭课程选择页面
                            layer.msg('课程更换成功！', {
                                icon: 1,
                                time: 600,
                                shade: 0.1
                            });
                        });
                    });
                }
            });
        }
    });
});